<template>
  <div id="results-singers">
    <div
      v-for="(item, index) in artists"
      :key="index"
      :class="{ 'artist-item': true, isEven: (index + 1) % 2 === 0 }">
      <div class="img-container">
        <img :src="item.img1v1Url" alt="">
      </div>
      <div class="artist-name">{{ item.name }}</div>
      <div class="personal-page">
        <i class="iconfont icon-yonghu"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResultSinger',
  props: {
    artists: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>

<style scoped lang="less">
#results-singers {
  user-select: none;
  .artist-item {
    cursor: pointer;
    padding: 10px 0 10px 30px;
    height: 65px;
    display: flex;
    .img-container {
      width: 45px;
      height: 0;
      padding-top: 100%;
      position: relative;
      img {
        position: absolute;
        top: 0;
        width: 100%;
      }
    }
    .artist-name, .personal-page {
      padding-left: 10px;
      margin: auto 0;
      font-size: 13px;
      color: #333;
    }
    .personal-page {
      padding: 1px;
      margin-left: 10px;
      border-radius: 50%;
      border: 1px solid #e8bebf;
      display: flex;
      align-items: center;
      i {
        color: #c62f2f;
        font-size: 13px;
        font-weight: 700;
      }
      &:hover {
        background-color: #dadbdc;
      }
    }
    &.isEven {
      background-color: #f5f5f7;
    }
    &:hover {
      background-color: #ebeced;
    }
  }
}
</style>
